<template>
	<!-- 测试 -->
	<view class="flex flex-column test">
		<view class="container bac-color-fff ">
			<view class="font-bold font-size-18 font-color-666 pad-t-10 pad-b-10">
				<text>{{info.title}}</text>
			</view>
			<view class="text-right font-color-666 pad-b-15">
				<text>{{info.test_num}}人已测</text>
			</view>
            <view class="pos-rel ">
				<view class="question-image">
                    <image :src="info.image" mode="aspectFill"></image>
                </view>
				<view class="mark-pages pos-abs">
					<text>{{ subjectIndex + 1 }}/{{ question.length }}</text>
				</view>
			</view>
		</view>

        <!-- 内容 -->
         <swiper  :current="subjectIndex" class="swiper-box flex-1" @change="SwiperChange">
            <swiper-item v-for="(item, index) in question" :key="index">
                <view class="" v-if="index - subjectIndex >= -1 && index - subjectIndex <= 1">
                    <scroll-view scroll-y="true" class="scroll-Y" :style="{ height: scrollHeight + 'px' }">
                        <view class="test-content container bac-color-fff">
                            <!-- 题目 -->
                            <view class="cub flex justify-between align-center">
                                <text class="action"></text>
                                <text class="flex-1 mar-l-5">{{ item.title }}</text>
                            </view> 
                            <!-- 图片 -->
                            <!-- <view class=" mark-image"  v-if="item.image">
                                <image :src="item.image" mode="aspectFill"></image>
                            </view> -->
                            <!-- 选项 -->
                            <view class="solid-top mar-t-10">
                                <radio-group class="dis-block">
                                    <label class="font-size-15 pad-t-10 pad-b-10  flex solid-bottom"  v-for="(it, ik) in item.wen_ti" :key="ik" @click="goAnswer(it.option)">
                                        <view class="">
                                            <radio
                                                color="#0088ff"
                                                class="mauve"
                                                :value="it.option"
                                                :class="item.userAnswer.indexOf(it.option) > -1 ? 'checked' : ''"
                                                :checked="item.userAnswer.indexOf(it.option) > -1 ? true : false"
                                            ></radio>
                                            <!-- :class="item.userAnswer.indexOf(it.option) > -1 ? 'checked' : ''" -->
                                            <!-- :checked="item.userAnswer.indexOf(it.option) > -1 ? true : false" -->
                                        </view>
                                        <view class="padding-left-xs title text-black">{{ it.option }}.{{ it.intro }}</view>
                                    </label>
                                </radio-group>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </swiper-item>
        </swiper>

		<view class="footer flex align-center text-center justify-center tabbar-height bac-color-fff">
			<view class="flex-1" @click="MoveSubject(-1)">
				<view class="cuIcon-back"></view>
				上一题
			</view>
			<view class="flex-1" @click="MoveSubject(1)">
				<view class="cuIcon-right"></view>
				下一题
			</view>
        <view class="flex-1 flex justify-around align-center btn-group">
                <button class="sub-btn"  @click="goTest">提 交</button>
            </view>
		</view>
	</view>
</template>

<script>
import {startTest,makeResult} from '@/utils/http'
export default {
    data(){
        return {
            currentType: 0, //当前题型
			subjectIndex: 0, //跳转索引
			autoRadioNext: true, //判断题、单项题，自动移下一题
            scrollHeight: 300,
            info:'',
            question:[],    
        }
    },
   
    methods:{
        getstartTest() {
            const _that = this;
            startTest().then(res=>{
                if(res){
                    _that.info = res
                    let question = res.question;
                        question.sort(function(a, b) {
                            return a['question_id'] - b['question_id'];
                        });
                        _that.question = question;
                        
						// this.title = res.data.title;
						// this.test_type = res.data.type;
						// this.image = res.data.image;
						// this.test_num = res.data.test_num;
                }
            }).then(res=>{
                console.log(res);
                
            })
		},
        SwiperChange: function(e) {
			//滑动事件
			let index = e.target.current;
			if (index != undefined) {
				this.subjectIndex = index;
			}
		},
        goAnswer: function(values) {
			//单选选中			
			this.question[this.subjectIndex].userAnswer = values;
			if (this.autoRadioNext && this.subjectIndex < this.question.length - 1) {
				//跳转下一题
				this.subjectIndex += 1;
			}
		},
        MoveSubject(e){
            //上一题、下一题
			if (e === -1 && this.subjectIndex != 0) {
				this.subjectIndex -= 1;
			}
			if (e === 1 && this.subjectIndex < this.question.length - 1) {
				this.subjectIndex += 1;
			}
        },
        goTest(){
            let index = -1;
			let result = [];
			for (let i = 0, len = this.question.length; i < len; i++) {
				if (!this.question[i].userAnswer) {
					index = i;
					break;
				}
				result.push({
					main_id: this.question[i].main_id,
					question_id: this.question[i].question_id,
					userAnswer: this.question[i].userAnswer
				});
            }
			if (index != -1) {
				this.errorToShow(`第${index + 1}题未作答,请先作答`);
				return;
            }
            makeResult({test_id:this.info.id,result: JSON.stringify(result)}).then(res=>{
                if(res){
                    uni.redirectTo({
                        url: '/pages/test/success?test_id='+ this.info.id
                    });
                }
            })
        }
    },
    mounted() {
		let info = uni
			.createSelectorQuery()
			.in(this)
			.select('.swiper-box')
			.boundingClientRect();
		info.exec(res => {
			this.scrollHeight = res[0].height-30;
		});
    },
    onLoad(){
        this.getstartTest();
    },
}
</script>

<style scoped>
page {
	background-color: #f4f6f8;
}
.test{
    height: calc(100vh - 100rpx);
}
.question-image{
    /* flex-basis: 90%; */
    border-radius: 3px;
    box-sizing: border-box;
}
.question-image image{
    height: 152px;
    width: 100%;
    border-radius: 3px;
}
.mark-pages{
    bottom: 10px;
    right: 10px;
    z-index: 999;
    background-color: #0088ff;
    color: #ffffff;
    padding:3px 5px;
    border-radius: 5px;
    /* flex-basis: 10%; */
    /* min-width: 35px;
    padding-top: 136px; */
}
.cub{
    position: relative;
    min-height: 100upx;
	/* align-items: center; */
	/* justify-content: space-between; */
}
.cub .action{
    height: 20upx;
    width: 20upx;
    background-color: #0088ff;
    border-radius: 100%;
	/* justify-content: center; */
	
}
.mark-image image{
    width: 100%;
    height: 300rpx;
    border-radius: 5rpx;
}
.test-content >>>uni-radio .uni-radio-input {
	bottom: 5upx;
}
.footer{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
}
.footer .btn-group{
      padding: 0 5px;
}
.footer .sub-btn{
    background-color: #0088ff;
    color: #ffffff;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 100upx;
    
    font-size: 14px;
    height: 32px;
    box-shadow: 1px 3px 5px #cfc8c8f1;
  
}
</style>